<template>
  <el-dialog v-model="dialogFormVisible" title="分配权限">
    <el-tree
      ref="treerr"
      :data="data"
      :props="defaultProps"
      show-checkbox
      default-expand-all
      @check="treeclick"
      :default-checked-keys="PowerID"
      node-key="id"
    />

    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="submit">确认</el-button>
      </span>
    </template>
  </el-dialog>
</template>
<script lang="ts" setup>
import { reactive, ref, watch, nextTick } from "vue";
import { useStore } from "vuex";
import { setPower } from "@/api/role";
const store = useStore();
const defaultProps = {
  children: "children",
  label: "label",
  //   disabled: "disabled", //禁选配置
};
// 打开弹窗
const dialogFormVisible = ref(false);

const data: any = reactive([]);

// 叶子结点结束

// 初始默认的角色带有的权限id
const PowerID: any = ref([]);
const userid = ref(0);
// 权限列表
const pid: any = reactive([]);

// 打开按钮
const openDialog = (pi: any, userId: number) => {
  userid.value = userId;
  pid.push(...pi);
  //   console.log(store.state.role.roletree, "xinxixxx");
  //   获取默认的角色带有的权限id
  console.log(pi, pi.length, "打开弹窗");
  //   获取权限树
  data.push(...store.state.role.roletree);
  dialogFormVisible.value = true;
};
const treerr = ref();
watch(
  () => dialogFormVisible.value,
  () => {
    if (!dialogFormVisible.value) {
      PowerID.value.splice(0);
      pid.length = 0;
    } else {
      if (pid.length > 0) {
        const fn = (id: any) => {
          id.map((item: any) => {
            if (item.children) {
              PowerID.value.push(item.id);
              fn(item.children);
            } else {
              return PowerID.value.push(item.id);
            }
          });
        };
        fn(pid);
        nextTick(() => {
          treerr.value.setCheckedKeys([...PowerID.value]); //设置setCheckedKeys来设置默认的选中状态
        });
        // console.log(arrID, "最终权限ID");
      } else {
        nextTick(() => {
          treerr.value.setCheckedKeys([]);
        });
      }
      console.log(pid, PowerID.value, "权限列表");
      settree.value = PowerID.value.join(",");
      console.log(settree.value, PowerID.value, "最终渲染");
    }
    console.log("弹窗监听的数据");
  }
);
// 树状图选中的值
const treeList: any = ref([]);
const settree = ref("");

const treeclick = (v1: any, v2: any) => {
  console.log(v1, "树状图的值v1 tree结构");
  console.log(v2, "树状图的值v2 总数分单条");
  //   treeList.value = [...v2.checkedNodes];
  treeList.value.splice(0);
  for (let o = 0; o < v2.checkedNodes.length; o++) {
    treeList.value.push(v2.checkedNodes[o].id);
  }
  for (let t = 0; t < v2.halfCheckedKeys.length; t++) {
    treeList.value.push(v2.halfCheckedKeys[t]);
  }

  settree.value = treeList.value.join(",");
  console.log(treeList.value, settree.value, "新的");
};
// 确认按钮
const submit = async () => {
  console.log("tree选中信息");
  let res = await setPower({
    id: userid.value,
    rids: settree.value,
  });
  // 确认信息就将更改的信息更新
  PowerID.value.length = 0;
  PowerID.value.push(...treeList.value);
  // console.log(PowerID.value, treeList.value, settree.value, "确定信息");
  // console.log(res, "分配");
  dialogFormVisible.value = false;
};

// 暴露子组件方法
defineExpose({
  openDialog,
});
</script>
<style scoped>
.el-button--text {
  margin-right: 15px;
}
.el-select {
  width: 300px;
}
.el-input {
  width: 300px;
}
.dialog-footer button:first-child {
  margin-right: 10px;
}
</style>
